<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-15 17:33:11
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-02 09:57:17
 * @FilePath: \Civil_Servant_Performance_PC\src\App.vue
-->
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker'
import { getConfigKey } from '@/api/system/config'

export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  components: { ThemePicker },
  mounted() {
    this.getConfigKey()
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title}` : process.env.VUE_APP_TITLE
      }
    }
  },
  methods: {
    getConfigKey() {
      getConfigKey('sys.website.logo').then(res => {
        let linkIcon = res.msg
        let relIcon = document.head.querySelector("link[rel='icon']")
        relIcon.href = linkIcon
      })
      getConfigKey('sys.website.title').then(res => {
        this.$store.dispatch('settings/setTitle', res.msg)
      })
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style>
#app .theme-picker {
  display: none;
}
::v-deep .vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: middle !important;
}
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
